<template>
    <div>
        <div class='playercontainer'>
            <img @click='enterMusicInfo' class='playersingerimg'
                 :src='$store.state.nowsongInfo.imgUrl?$store.state.nowsongInfo.imgUrl:defaultpic'/>
            <div class='block'>
                <el-slider v-model='sliderValue' :max='$store.state.nowsongInfo.timeLength'
                           :format-tooltip='formatTooltip' @change='MusicTimeChange'
                           :disabled='$store.state.nowsongInfo.url?false:true'></el-slider>
            </div>
            <div class='playcontent'>
                <div class='songinfo songtext'>
                    <div class='songname'>{{$store.state.nowsongInfo.songname}}</div>
                    <div class='singername'>{{$store.state.nowsongInfo.singername}}</div>
                </div>
                <div class='songinfo'>
                    <img @click='playsong' class='playimg' :src='$store.state.musicStatu?pauseicon:playicon'
                         ref='musicstatu'/>
                    <img @click='nextsong' class='nextsongimg' src='../../common/image/next_icon.png'/>
                    <i class='el-icon-s-unfold' @click='playerlist'></i>
                </div>
            </div>
            <audio :src='$store.state.nowsongInfo.url' ref='audio'></audio>
        </div>
        <div class='popup' v-show='listshow' @touchmove.stop @mousewheel.stop>
            <div class='listbackground' @click.prevent='closelist' @touchmove.stop.prevent
                 @mousewheel.stop.prevent></div>

            <el-collapse-transition>
                <player-list :listshow='listshow' @closelist='closelist'></player-list>
            </el-collapse-transition>

        </div>
        <musicinfo :musicinfoflag='musicinfoflag' @func='musicinfofunc'></musicinfo>
    </div>
</template>

<script>
  import defaultpic from 'common/image/default.png'
  import playicon from 'common/image/play_icon.png'
  import pauseicon from 'common/image/pause_icon.png'
  import PlayerList from './playerlist.vue'
  import musicinfo from './musicinfo.vue'

  export default {
    name: 'player',
    data() {
      return {
        // 切歌重置为0
        sliderValue: 0,
        // 进度条计时器
        Timer: null,
        listshow: false,
        defaultpic,
        playicon,
        pauseicon,
        // 音乐详情flag
        musicinfoflag: false
      }
    },
    mounted() {
      this.$store.commit('setMusicStatu', false);
    },
    methods: {
      //  进入音乐详情页
      enterMusicInfo() {
        this.musicinfoflag = true;
      },
      // 传入音乐详情页
      musicinfofunc() {
        this.musicinfoflag = false;
      },
      // 进度条的值,时间格式化
      formatTooltip(val) {
        // 取整为分钟数，取余为秒数（小于10需要补0）
        return parseInt(val / 60) + ':' + (val % 60 < 10 ? '0' + val % 60 : val % 60)
      },
      // 进度条控制音乐进度，释放后执行
      MusicTimeChange() {
        this.$refs.audio.currentTime = this.sliderValue;
        console.log(this.$refs.audio.currentTime)
      },
      playsong() {
        // 当歌曲列表有数据后,nowsongInfo对象不为空
        if (JSON.stringify(this.$store.state.nowsongInfo) !== '{}') {
          // 当前歌曲暂停则点击后变为播放---播放状态：暂停图标
          if (this.$refs.audio.paused) {
            this.$refs.audio.play();
            // this.$refs.musicstatu.src=this.pauseicon;
            this.$store.commit('setMusicStatu', true);
          }
          // 当前歌曲播放则点击后变为暂停---暂停状态：暂停图标
          else {
            // this.$refs.musicstatu.src=this.playicon;
            this.$refs.audio.pause();
            this.$store.commit('setMusicStatu', false);
          }
        }
      },
      nextsong() {
        // 当歌曲列表有数据后,nowsongInfo对象不为空（为空下一首无效）
        if (JSON.stringify(this.$store.state.nowsongInfo) !== '{}') {
          // 需要判断播放方式1.顺序 2.随机 3.单曲
          // 1.顺序播放
          if (this.$store.state.playstyle=='normal') {  //eslint-disable-line
            // 通过nowsonginfo的id查找songlist下一首歌url
            let flagindex = -1;
            this.$store.state.songslist.forEach((i, index) => {
              // 如果匹配到id 且 index不为最后一个
              if (i.id == this.$store.state.nowsongInfo.id && index != this.$store.state.songslist.length - 1) { //eslint-disable-line
                flagindex = index
              }
            })
            // 如果songslist不只有一首歌,则开始下一首
            if (this.$store.state.songslist.length != 1) {    //eslint-disable-line
              this.$store.commit('setnowSongInfo', this.$store.state.songslist[flagindex + 1])
            } else {
              // 为只有一首则，重头开始
              this.$refs.audio.autoplay = true;
              this.sliderValue = 0;
              this.$refs.audio.load();
            }
            //   this.$store.commit('setnowSongInfo',this.$store.state.songslist[flagindex+1])
            this.$store.commit('setMusicStatu', true);
          }else if (this.$store.state.playstyle=='random') { //eslint-disable-line
            //  2.随机播放
            this.$store.commit('setMusicStatu', true);
            let random = parseInt(Math.random() * this.$store.state.songslist.length);
            this.$store.commit('setnowSongInfo', this.$store.state.songslist[random])
          }else if (this.$store.state.playstyle=='single') {    //eslint-disable-line
            //  3.单曲循环
            this.$store.commit('setMusicStatu', true);
            this.$refs.audio.autoplay = true;
            this.sliderValue = 0;
            this.$refs.audio.load();
          }
        }
      },
      playerlist() {
        this.listshow = !this.listshow;
      },
      closelist() {
        this.listshow = false;
      }
    },
    components: {
      PlayerList,
      musicinfo
    },
    computed: {
      // 监听store中属性nowsongInfo
      clicksong() {
        return this.$store.state.nowsongInfo
      },
      // 监听store的播放状态
      musicstatu() {
        return this.$store.state.musicStatu
      }
    },
    watch: {
      //  属性变化：用户点击歌单歌曲----立即重新播放该歌曲
      clicksong: function (newval, oldval) {
        this.$refs.audio.autoplay = true;
        // 切歌进度条设为0
        this.sliderValue = 0;
        // 重新加载歌曲url
        this.$refs.audio.load();
        // 当前歌曲变化则singerimg角度设为0
        document.getElementsByClassName('playersingerimg')[0].style.transform = 'rotate(0deg)';
        document.getElementsByClassName('playersingerimg')[0].style.transition = ''
      },
      // 播放状态为true则每秒自增1
      musicstatu(newval, oldval) {
        // 如果为播放状态则进度条每一秒走一步
        if (this.$store.state.musicStatu == true) {  //eslint-disable-line
          this.Timer = setInterval(() => {
            //  头像每秒转step度
            //  需要获取当前角度，设置步长
            var nowdeg;
            var step = 12;
            // 如果transform为空且歌曲进度条为刚开始
            if (document.getElementsByClassName('playersingerimg')[0].style.transform == '' || this.sliderValue == 0) { //eslint-disable-line
              nowdeg = 0;
              // 重置为0deg且过渡时间去除
              document.getElementsByClassName('playersingerimg')[0].style.transform = 'rotate(' + nowdeg + 'deg)';
              document.getElementsByClassName('playersingerimg')[0].style.transition = ''
            } else {
              // 当前角度获取match[1]+step步长,如果nowdeg转完一圈则重置
              nowdeg = parseInt(document.getElementsByClassName('playersingerimg')[0].style.transform.match(/^rotate\((\d+)deg\)$/i)[1]) + step;
              // if(nowdeg==360){
              //     nowdeg=0;
              // }
              //  旋转角度且过渡时间为1S与计时器一致
              document.getElementsByClassName('playersingerimg')[0].style.transform = 'rotate(' + nowdeg + 'deg)';
              document.getElementsByClassName('playersingerimg')[0].style.transition = 'all 1s linear'
            }
            this.sliderValue++;
          }, 1000)
        } else {
          clearInterval(this.Timer)
        }
      },
      // 监听进度条
      sliderValue() {
        // 如果自动播放时：当前时长等于总时长则为歌曲结尾
        if (this.$refs.audio.currentTime == this.$refs.audio.duration) {  //eslint-disable-line
          this.nextsong();
        }
      }
    }
  }
</script>

<style scoped>
    .playercontainer {
        width: 100%;
        padding-left: 0.5rem;
        position: fixed;
    }

    .playersingerimg {
        position: absolute;
        height: 3rem;
        width: 3rem;
        top: -0.3rem;
        /*padding-top: 0.2rem;*/
        /*transform:rotate(30deg);*/
        border-radius: 50%;
        /*transition: all 1s linear;*/
    }

    .playcontent {
        display: flex;
        /*margin:0 auto;*/
        /*padding-top: 0.2rem;*/
        justify-content: space-between;

    }

    .songname {
        font-size: 1rem;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .singername {
        width: 100%;
        font-size: 0.6rem;
        opacity: 0.8;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .playimg {
        width: 2rem;
        height: 2rem;

    }

    .songinfo {
        display: inline-block;
        width: 7.6rem;
    }

    .songtext {
        /*calc 符号两侧均要留空*/
        width: calc(100% - 11rem);
        padding-top: 0.3em;
        padding-left: 3.4rem;
    }

    .nextsongimg {

        width: 2rem;
        height: 2rem;
        padding-right: 1rem;
    }

    .block {
        height: 1rem;
        padding-left: 4rem;
        padding-right: 1rem;
        padding-bottom: 0.6rem;
    }

    .el-icon-s-unfold {
        transform: scale(2, 2) translateY(-0.3rem);
    }

    .listbackground {
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: 0.3;
    }

    .el-collapse-transition {
        /*opacity: 1;*/
    }

    .popup {
        position: absolute;
        bottom: 0;
        width: 100%;
        /*100vh=屏幕100%的高度，100vw=屏幕100%宽度*/
        height: 100vh;
        /*opacity: 1;*/
        /*height: 100%;*/
        z-index: 9999;
    }

    .transition-box {
        z-index: 9998;

    }
</style>
